<template>
  <div>
    <el-row style="margin: 20px 0">
      <el-col :span="7">
        <el-input v-model="key" placeholder="请输入内容"></el-input>
      </el-col>
      <el-col :span="8" style="margin: 0 10px">
        <el-date-picker
          v-model="date"
          type="daterange"
          range-separator=","
          start-placeholder="Start date"
          end-placeholder="End date"
        >
        </el-date-picker>
      </el-col>

      <el-col :span="1.5">
        <el-button type="primary" @click="search">搜索</el-button>
      </el-col>
    </el-row>

    <el-button type="primary" @click="openModal">添加</el-button>
    <el-dialog :title="tag === 0 ? '添加' :'修改'" :visible.sync="dialogFormVisible" @close="close">
      <el-form :model="fmFormData">
        <el-form-item label="fm名称">
          <el-input v-model="fmFormData.fmName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="fm描述">
          <el-input
            v-model="fmFormData.fmDescription"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8080/fm/uploadimg"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <el-image
              style="width: 100px; height: 100px"
              :src="imageUrl"
              fit="fill"
              v-if="imageUrl"
            ></el-image>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-upload
            class="upload-demo"
            action="http://localhost:8080/fm/uploadaudio/"
            :before-remove="beforeRemove"
            multiple
            :limit="1"
            :on-success="handleAudioSuccess"
            :on-exceed="handleExceed"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAdd">确 定</el-button>
      </div>
    </el-dialog>
    <el-table :data="displayRow" style="width: 100%">
      <el-table-column prop="fmName" label="fm标题" width="180">
      </el-table-column>
      <el-table-column prop="fmImageUrl" label="图片" width="180">
        <template slot-scope="scope">
          <div class="img-container">
            <img
              :src="`http://localhost:8080/down?file=${scope.row.fmImageUrl}`"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="fmUrl" label="音频">
        <template slot-scope="scope">
          <div class="img-container">
            <audio controls style="width: 170px;">
              <source :src="`http://localhost:8080/fm/downaudio?fileName=${scope.row.fmUrl}`" type="audio/mp3">
            </audio>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="上传时间"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-popconfirm title="确认删除此条记录" @confirm="handleDelete(scope.row.fmId)">
            <el-button
              size="mini"
              type="danger"
              slot="reference"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      sytl
      layout="prev, pager, next"
      :total="totalCount"
      :current-page="currentPage"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>
<script>
import dayjs from "dayjs";
export default {
  data() {
    return {
      key: "",
      tag:0,
      date: [],
      fmTableData: [],
      dialogFormVisible: false,
      fmFormData: {
        fmId: -1,
        fmName: "",
        fmDescription: "",
        fmImageUrl: "",
        fmUrl: "",
        fmStatus: 1,
      },
      imageUrl: "",
      totalCount: 0, // 总记录数
      pageSize: 10, // 每页显示的记录数
      currentPage: 1, // 当前页码
    };
  },
  methods: {
    openModal() {
      this.tag = 0;
      this.fmFormData = {
        fmId: -1,
        fmName: "",
        fmDescription: "",
        fmImageUrl: "",
        fmUrl: "",
        fmStatus: 1,
      }, 
      this.dialogFormVisible = !this.dialogFormVisible;
    },

    search() {
      var startTime = "";
      var endTime = "";
      if (this.date.length != 0) {
        let [start, end] = this.date;
        if (start) {
          startTime = dayjs(start).format("YYYY-MM-DD HH:mm:ss");
        }
        if (end) {
          endTime = dayjs(end).format("YYYY-MM-DD HH:mm:ss");
        }
      }

      this.$http
        .get(
          `http://localhost:8080/fm/search?q=${this.key}&startTime=${startTime}&endTime=${endTime}&pageNum=${this.currentPage}&pageSize=${this.pageSize}`
        )
        .then((res) => {
          console.log(res.data);
          this.fmTableData = res.data.list;
          this.totalCount = res.data.total;
        });
    },

    close() {
      this.imageUrl = "";
    },
    handleAdd() { 
      this.dialogFormVisible = false;
      if (this.tag === 0) {
        this.$http
        .post("http://localhost:8080/fm/addFM", {
          ...this.fmFormData,
        })
        .then((res) => {
          this.$http
            .get(
              `http://localhost:8080/fm/fmlist?pageNum=${this.currentPage}&pageSize=${this.pageSize}`
            )
            .then((res) => {
              console.log(res);
              this.fmTableData = res.data.list;
              this.totalCount = res.data.total;
            })
            .catch((e) => console.log(e));
        });
      } else {
        this.$http
        .put("http://localhost:8080/fm/updateFM", {
          ...this.fmFormData,
        })
        .then((res) => {
          this.$http
            .get(
              `http://localhost:8080/fm/fmlist?pageNum=${this.currentPage}&pageSize=${this.pageSize}`
            )
            .then((res) => {
              console.log(res);
              this.fmTableData = res.data.list;
              this.totalCount = res.data.total;
            })
            .catch((e) => console.log(e));
        });
      }
      
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
      this.$http
        .get(
          `http://localhost:8080/fm/fmlist?pageNum=${this.currentPage}&pageSize=${this.pageSize}`
        )
        .then((res) => {
          console.log(res.data);

          this.fmTableData = res.data.list;
          this.totalCount = res.data.total;
        });
    },
    handleAvatarSuccess(res, file) {
      this.fmFormData.fmImageUrl = res.data;
    },
    beforeAvatarUpload(file) {
      var objectURL = URL.createObjectURL(file);
      this.imageUrl = objectURL;
    },

    handleAudioSuccess(res, file) {
      this.fmFormData.fmUrl = res.data;
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    handleEdit(e){
      console.log(e);
      this.imageUrl = `http://localhost:8080/down?file=${e.fmImageUrl}`
      this.tag = 1;
      this.dialogFormVisible = true;
      this.fmFormData = e;
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },

    handleDelete(id) {
      this.$http.get(`http://localhost:8080/fm/remove/${id}`).then((res) => {
        this.$http
          .get(
            `http://localhost:8080/fm/fmlist?pageNum=${this.currentPage}&pageSize=${this.pageSize}`
          )
          .then((res) => {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.fmTableData = res.data.list;
            this.totalCount = res.data.total;
          })
          .catch((e) => console.log(e));
      });
    },
  },

  computed: {
    displayRow() {
      console.log(this.fmTableData, "@@@@@@");
      // console.log(this.fmTableData.filter(item => item.fmStatus === 1));
      return this.fmTableData.filter((item) => item.fmStatus === 1);
    },
  },

  created() {
    this.$http
      .get(
        `http://localhost:8080/fm/fmlist?pageNum=${this.currentPage}&pageSize=${this.pageSize}`
      )
      .then((res) => {
        console.log(res);
        this.fmTableData = res.data.list;
        this.totalCount = res.data.total;
      })
      .catch((e) => console.log(e));
  },
};
</script>
<style>
.img-container {
  width: 70px;
  height: 70px;
  position: relative;
  border-radius: 20%;
}

.img-container > img {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  object-fit: cover;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 20%;
}

.play-icon {
  font-size: 30px;
  line-height: 70px;
  margin: 0 auto;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
